<template>
    <div class="app-container calendar-list-container">
      <el-button
          icon="el-icon-circle-plus-outline"
          type="button"
          class="el-button el-button--primary"
          @click="toAddprocessCategory"
          style="margin-bottom: 20px"
          >
          新增计件方案</el-button>
      <div class="filter-container">
          <el-input
                  @keyup.enter.native="getData"
                  clearable
                  v-model="listQuery.processName"
                  style="width: 150px;margin-right:15px;margin-top:7px"
                  class="filter-item"
                  placeholder="工艺名称"
          ></el-input>
  
          <el-select
              clearable
              @keyup.enter.native="getData"
              v-model="listQuery.schemeType"
              placeholder="方案类型"
              class="filter-item"
              style="width: 150px;margin-right:15px;margin-top:7px">
              <el-option
                  v-for="(item,index) in optionsSchemeType"
                  :key="index"
                  :label="item"
                  :value="item">
              </el-option>
          </el-select>
  
          <el-input
                  @keyup.enter.native="getData"
                  clearable
                  v-model="listQuery.jobNumber"
                  style="width: 150px;margin-right:15px;margin-top:7px"
                  class="filter-item"
                  placeholder="修改人工号"
          ></el-input>
  
          <el-select
              v-model="listQuery.isDelete"
              placeholder="状态"
              style="width: 150px;margin-right:15px;margin-top:7px">
              <el-option
              :value="item"
              :label="item"
              v-for="(item,index) of this.statusList"
              :key="index"/>
          </el-select>
  
          <el-button style="margin-top:7px" class="filter-item" type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
          <el-button type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>
      </div>
  
      <!-- 表单 -->
      <el-table :data="tableData"
      v-loading="tableLoading"
      element-loading-text="拼命加载中"
      stripe border fit
      highlight-current-row
      style="width: 100%">
          <el-table-column label="工序大类" prop="processType" align="center"/>
          <el-table-column label="工序名称" prop="processName" align="center"/>
          <el-table-column label="方案类型" prop="schemeType" align="center"/>
          <el-table-column label="条件" prop="conditionIf" align="center"/>
          <el-table-column label="条件序号" prop="conditionIndex" align="center" width="70"/>
          <el-table-column label="标准值" prop="standard" align="center" width="70"/>
          <el-table-column label="标准值类型" prop="standardType" align="center"/>
          <el-table-column label="修改人工号" prop="jobNumber" align="center" width="100"/>
          <el-table-column label="后台账号" prop="account" align="center"/>
          <el-table-column label="是否删除" prop="isDelete" align="center" width="100">
              <template slot-scope="scope">
                  <div class="fx">
                  {{
                      scope.row.isDelete == 0
                      ? "未删除" : "已删除"
                  }}
                  </div>
              </template>
          </el-table-column>
          <el-table-column label="操作"  align="center" width="120">
              <template slot-scope="scope" >
                  <div class="fx" style="display: flex" v-if="scope.row.isDelete == 0">
                  <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
                  <el-button
                      icon="el-icon-delete"
                      class="el-button el-button--danger"
                      style="font-size: 15px;"
                      @click="submitDel(scope.row,scope.$index)"
                  ></el-button>
                  </div>
              </template>
          </el-table-column>
      </el-table>
  
      <!-- pagination 分页 -->
      <!-- <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[5,10, 20, 30, 40,100,300,500]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div> -->
    </div>
  </template>
  
  <script>
  import { findMoneyConfig,delMoneyConfig,seldplate } from "@/api/processRoute"
  export default {
      name: 'pieceworkPlan',
      data() {
        return {
          tableLoading: false,
          listQuery: {
              page: 1,
              limit: 1000,
              isDelete: '未删除',
              processName: '数折',
              schemeType:'单价方案'
          },
          total: 0,
          tableData: [],
          paramNameLists: [{name:'焊接零件数量',value:'HJLJSL'},
          {name:'人员定额',value:'RYDE'},
          {name:'加工数量',value:'JGSL'},
          {name:'折弯刀数',value:'ZWDS'},
          {name:'单件重量',value:'DJZL'},
          {name:'单位平方',value:'DWPF'},
          {name:'连焊长度',value:'LHCD'},
          {name:'碰焊点数',value:'PHDS'},
          {name:'焊点数量',value:'HDSL'},
          {name:'加工周长',value:'JGZC'},
          {name:'装配零件数量',value:'ZP_LJSL'},
          {name:'装配普通螺钉数量',value:'ZP_LDSL'},
          {name:'装配外购件数量',value:'ZP_WGJSL'},
          {name:'装配打胶长度',value:'ZP_DJCD'},
          {name:'装配不锈钢螺钉数量',value:'ZP_BXGLDSL'},
          {name:'装配功率螺钉数量',value:'ZP_GLLDSL'},
          {name:'装配固定人时',value:'ZP_TIME'},
          {name:'铆钉数量',value:'MDSL'},
          {name:'加工次数',value:'JGCS'},
          {name:'周长',value:'ZC'},
          {name:'材质',value:'CZ'},
          {name:'长',value:'C'},
          {name:'宽',value:'K'},
          {name:'厚',value:'H'},
          {name:'重',value:'Z'},
          {name:'同一工单数量',value:'GDSL'},
          {name:'焊接零件数量',value:'HJLJSL'},
          {name:'喷涂面积',value:'PBMJ'},
          {name:'保护面积',value:'BHMJ'},
          {name:'保护个数',value:'BHGS'},
          ],
          ableparamList: [{name:'单价',value:'DJ'},{name:'单价1',value:'DJ1'},
          {name:'单价2',value:'DJ2'},{name:'单价3',value:'DJ3'},
          {name:'难度系数',value:'NDXS'},{name:'散单系数',value:'SDXS'},
          {name:'定额人数',value:'DERS'},{name:'加工数量',value:'JGSL'},
          {name:'加工次数',value:'JGCS'},{name:'铆钉数量',value:'MDSL'},
          {name:'折弯刀数',value:'ZWDS'},{name:'单件重量',value:'DJZL'},
          {name:'单位平方',value:'DWPF'},{name:'连焊长度',value:'LHCD'},
          {name:'碰焊点数',value:'PHDS'},{name:'焊点数量',value:'HDSL'},
          {name:'加工周长',value:'JGZC'},
          {name:'喷涂面积',value:'PBMJ'},
          {name:'保护面积',value:'BHMJ'},
          {name:'保护个数',value:'BHGS'}],
          optionsSchemeType: ['单价方案','单价1方案','单价2方案','单价3方案','难度系数方案','散单系数方案','定额人数方案'],
          statusList: ['未删除','已删除']
        };
      },
      methods: {
          getData() {
              this.listQuery.page = 1
              this.listQuery.limit = 10000
              this.handleFilter()
          },
          async handleFilter() {
              console.log(this.paramNameLists)
              this.tableData = []
              // if(!this.listQuery.processName) return this.$message.error('工艺名称不能为空!')
              this.tableLoading = true
              let query = Object.assign({},this.listQuery)
              query.isDelete = this.listQuery.isDelete =='未删除'?0:1
              // if(!query.type) delete query.type
              const data = await findMoneyConfig(query)
              this.tableData = data.data.list
              this.tableData.forEach((item,index) => {
                  item.conditionIf = this.getValue(item.conditionIf)
                  item.standardType = this.getValueStandard(item.standardType)
              })
              this.tableLoading = false
          },
          getValue(key){
              let name = key
              this.paramNameLists.forEach((item,index) => {
                  if(name.includes(item.value)){
                      let reg = new RegExp(item.value,'g')
                      name = name.replace(reg,item.name)
                  }
              })
              return name
          },
          getValueStandard(key){
              let value = ''
              this.ableparamList.forEach((item,index) => {
                  if(item.value == key.trim()){
                      value = item.name
                  }
              })
              return value
          },
          handleSizeChange(val) {
              this.listQuery.limit = val
              this.handleFilter()
          },
          handleCurrentChange(val) {
              this.listQuery.page = val
              this.handleFilter()
          },
          toAddprocessCategory() {
              this.$router.push({
                  path: 'addprocessCategory',
                  name: 'addprocessCategory',
                  params: {data: ''}
              })
          },
          handleEdit(row){
              this.$router.push({
                  path: 'addprocessCategory',
                  name: 'addprocessCategory',
                  params: {data: { processName: row.processName,processType: row.processType,schemeType: row.schemeType }}
              })
          },
          submitDel(row,index) {
              this.$confirm('是否确认删除', '注意', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.deleteData(row,index)
                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消'
                  });
                });
          },
          async deleteData(row,index){
              const data = await delMoneyConfig({id: row.timeId})
              if(data.code == '500') return
              if(data.code == '2') return this.$message.error(data.msg)
              if(data.code == '1'){
                    this.tableData.splice(index,1)
                    this.$message({
                        message:  data.msg,
                        type: 'success'
                     })
              }
          },
          async getMaterial(){
              let data = await seldplate()
              if(data.code == '500') return
              const errMsg = data.msg
              if(data.code != '1') return this.$message.error(errMsg)
              let children = []
              data.data.forEach((item,index) => {
                  let obj = {}
                  obj.name = item.texture
                  obj.value = item.textureCode
                  children.push(obj)
              })
              children = children.concat(this.paramNameLists)
              this.paramNameLists = children
              this.handleFilter()
          },
           // 导出excel
           async hExportExcel() {
            let query = Object.assign({},this.listQuery)
              query.isDelete = this.listQuery.isDelete =='未删除'?0:1
              const res = await findMoneyConfig(query)
            const { header, data } = this.transformDat(this.setSort(res.data.list))
              import('@/vendor/Export2Excel').then(excel => {
              // excel表示导入的模块对象
              console.log(excel)
              excel.export_json_to_excel({
              header, // 表头 必填
              data, // 具体数据 必填
              filename: '计件方案', // 文件名称
              autoWidth: true, // 宽度是否自适应
              bookType: 'xlsx' // 生成的文件类型
              })
            })
          },
          // 排序函数
           setSort(arr){
            let newArr = JSON.parse(JSON.stringify(arr))
            let arr1 = []
            newArr.forEach((item)=>{
              let obj = {
                processType: item.processType,
                processName: item.processName,
                schemeType: item.schemeType,
                conditionIf: item.conditionIf,
                conditionIndex: item.conditionIndex,
                standard: item.standard,
                standardType: item.standardType,
                jobNumber: item.jobNumber,
                account: item.account,
                isDelete: item.isDelete == 0 ? "未删除" : item.isDelete == 1 ? "已删除":"-"
            }
            arr1.push(obj)
            })
            return arr1
          },
          transformDat(res) {
            const mapInfo = {
              processType: '工序大类',
              processName: '工序名称',
              schemeType: '方案类型',
              conditionIf: '条件',
              conditionIndex: '条件序号',
              standard: '标准值',
              standardType: '标准值类型',
              jobNumber: '修改人工号',
              account: '后台账号',
              isDelete: '是否删除',
            }
            // 对data进行格式化
            // 取出所有的属性名
            const props = Object.keys(res[0]) // ['id','']
            // 将属性名从英文转为中文
            const header = props.map(zhkey => mapInfo[zhkey])
            const data = res.map(obj => Object.values(obj))
            return { header, data }
          },
      },
        // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
      mounted() {
          this.getMaterial()
      },
  };
  </script>
  
  <style>
  
  </style>
  